<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #25263b;
				height:100%;
				margin: 0;
				padding: 0;
				line-height: normal;
			}
			.logo{
				flex: 1;
			    background-image: url(../images/main/logo@2x.png);
			    background-position: center;
			    background-size: 80%;
			    background-repeat: no-repeat;
			}
			.menu{
				display: flex;
    				flex-direction: column;
    				height: 100%;
    				padding-bottom: 10%;
			}
			.menu-item{
				font-size: 2vw;
				flex: 1;
				display: flex;
			    justify-content: center;
			    flex-direction: column;
			    padding-left: 5.5vw;
			    color: #8f8f8f;
			    border-left: 5px solid transparent;
			    background-repeat: no-repeat;
			    background-size: 2vw;
			    background-position: 2.5vw 50%;
			}
			.menu-item.active{
				background-color: #12111e;
				border-left: 4px solid #3383eb;
				color: #fff;
			}
			.menu-item.jiaozhun{
				background-image: url(../images/main/icon/jiaozhun_b@2x.png);
			}
			.menu-item.jiaozhun.active{
				background-image: url(../images/main/icon/jiaozhun@2x.png);
			}
			.menu-item.jilu{
				background-image: url(../images/main/icon/jilu@2x.png);
			}
			.menu-item.jilu.active{
				background-image: url(../images/main/icon/jilu_l@2x.png);
			}
			.menu-item.jiluyi{
				background-image: url(../images/main/icon/jiluyi@2x.png);
			}
			.menu-item.jiluyi.active{
				background-image: url(../images/main/icon/jiluyi_l@2x.png);
			}
			.menu-item.qifen{
				background-image: url(../images/main/icon/qifen@2x.png);
			}
			.menu-item.qifen.active{
				background-image: url(../images/main/icon/qifen_l@2x.png);
			}
			.menu-item.changgui{
				background-image: url(../images/main/icon/changgui@2x.png);
			}
			.menu-item.changgui.active{
				background-image: url(../images/main/icon/changgui_l@2x.png);
			}
			.menu-item.guanyu{
				background-image: url(../images/main/icon/guanyu@2x.png);
			}
			.menu-item.guanyu.active{
				background-image: url(../images/main/icon/guanyu_l@2x.png);
			}
			
			
			#main-body{
				height:100%;
				background-color: #25263b;
				display: flex;
				flex-direction: column;
				color:#fff;
				padding: 10px;
				font-size: 24px;
			}
			
			.module{
				background-color:#2f2f4b;
			}
			.factor-row{
    				display: flex;
    				flex-direction: column;
    				justify-content: space-around;
    				padding: 1vh 1vw;
			}
			.factor-item{
			    display: flex;
			    justify-content: center;
			    flex-direction: column;
			    border: 1px solid #5a5870;
			    padding: 1vh 1vw;
			}
			.result-row{
    				display: flex;
    				flex-direction: column;
    				justify-content: space-around;
    				padding: 1vh 1vw;
			}
			.result-item{
			    display: flex;
			    //justify-content: center;
			    align-items: center;
			    border: 1px solid #5a5870;
			    padding: 1vh 1vw;
			}
			.canshu-row{
				flex: 1;
    				display: flex;
    				justify-content: space-between;
    				padding: 1vh 1vw;
			}
			.canshu-item{
				width: 19%;
			    display: flex;
			    justify-content: center;
			    
			    flex-direction: column;
			    border: 2px solid #5a5870;
			}
		</style>
	</head>

	<body>
		<div id="app" class="mui-content mui-row" style="height:100%;background-color: #25263b;">
			<div class="mui-col-xs-3" style="height: 100%; background-color: #1e2030;width:20%;">
				<div class="menu">
					<div class="logo"></div>
					<div class="menu-item jiaozhun active" href="jiaozhuncs.html">
						<span>{{$t("menu.jiaozhun")}}</span>
					</div>
					<div class="menu-item jilu" href="tab-webview-subpage-chat.html">
						<span>{{$t("menu.jilusz")}}</span>
					</div>
					<div class="menu-item jiluyi" href="tab-webview-subpage-contact.html">
						<span>{{$t("menu.jiluy")}}</span>
					</div>
					<div class="menu-item qifen" href="tab-webview-subpage-setting.html">
						<span>{{$t("menu.qifenjsq")}}</span>
					</div>
					<div class="menu-item changgui" href="tab-webview-subpage-contact.html">
						<span>{{$t("menu.shezhi")}}</span>
					</div>
					<div class="menu-item guanyu" href="tab-webview-subpage-setting.html">
						<span>{{$t("menu.guanyu")}}</span>
					</div>
				</div>
			</div>
			<div class="mui-col-xs-9" style="height: 100%;width:80%;">
				<div id="main-body" class="mui-content">
					<div class="module" style="font-size: 2vw;height: auto;padding: 2vh 2vw;display: flex;justify-content: space-between;">
						<div>
							<span>{{$t('condition.label')}}</span>
							<span style="color: #4caf50;" v-if="condition">{{$t('condition.start')}}</span>
							<span style="color: #ea6063;" v-if="!condition">{{$t('condition.stop')}}</span>
						</div>
						<div style="color: #ea6063;">{{now}}</div>
					</div>
					<div style="margin-top:2vh;margin-left:-1vw;height: auto;display: flex;justify-content: space-between;">
						<div class="module" style="padding:1.5vh 0;flex:1;margin-left: 1vw;display: flex;justify-content: center;" v-for="item in arr1">
							<div style="text-align: center;">
								<div style="height:5vh;background-position: center;background-size: contain;background-repeat: no-repeat;" :style="{backgroundImage:'url('+item.icon+')'}"></div>
								<span style="font-size: 1.5vw;">{{item.label}}</span>
							</div>
							<div style="font-size: 4vw;padding-left: 1vw;display: flex;justify-content: center;flex-direction: column;">
								{{valObj[item.field]}}
							</div>
						</div>
					</div>
					<div class="module" style="margin-top:2vh;flex:1;display: flex;">
						<div class="factor-row">
							<!--<button type="button" class="mui-btn mui-btn-primary" style="font-size: 3vh;padding: 1.5vh;">修改参数</button>-->
							<div v-for="item in arr2_1" class="factor-item" @click="editFactor(item)">
								<div style="font-size: 2.5vw;text-align: center;line-height: 1;">
									{{item.field}}
									<!--<input type="text" class="mui-input-clear" v-model="item.field" style="border: none;height: auto;background-color: transparent;margin-bottom: 0;font-size:2.5vw;width:10vw;text-align: center;padding: 0;">-->
								</div>
								<div style="display: flex;justify-content: center;align-items: center;">
									<div style="width:1.2vh;height:1.2vh;border-radius: 50%;display: inline-block;" :style="{backgroundColor:item.color}"></div>
									<span style="padding-left: 0.5vw;font-size:1.5vw;">{{$t(item.label)}}</span>
								</div>
							</div>
						</div>
						<div class="result-row" style="flex:1" v-if="arr_result.length==1">
							<div v-for="item in arr_result" class="result-item" style="flex:1;margin:2vh 0;justify-content: center;flex-direction: column;">
									<div style="font-size: 14vw;">
										{{item.field}}
									</div>
									<div style="font-size:4vw;">
										{{$t(item.label)}}
									</div>
							</div>
						</div>
						<div class="result-row" style="flex:1" v-if="arr_result.length==2 || arr_result.length==3">
							<div v-for="item in arr_result" class="result-item" style="flex:1;margin:2vh 0;justify-content: center;">
								<div style="display: flex;justify-content: center;align-items: center;">
									<span style="padding-left: 0.5vw;font-size:3vw;">{{$t(item.label)}}:</span>
								</div>
								<div style="font-size: 6vw;padding-left: 2vw;">
									{{item.field}}
								</div>
							</div>
						</div>
						<div class="result-row" style="flex:1;display: block;" v-if="arr_result.length==4">
							<div v-for="item in arr_result" style="display: inline-block;width: 50%;height: 50%;padding: 1vh;">
								<div class="result-item" style="justify-content: center;flex-direction: column;height:100%;">
									<div style="font-size: 6vw;">
										{{item.field}}
									</div>
									<div style="font-size:2vw;">
										{{$t(item.label)}}
									</div>
								</div>
							</div>
						</div>
						<div style="display: flex;flex-direction:column;align-items: center;justify-content: space-around;padding: 2vh 0;">
							<button type="button" @click="condition = !condition" :disabled="condition" class="mui-btn mui-btn-primary" style="width:25vh;height:25vh;font-size:4vh;">{{$t('btn.start')}}</button>
							<button type="button" @click="condition = !condition" :disabled="!condition" class="mui-btn mui-btn-danger" style="width:25vh;height:25vh;font-size:4vh;">{{$t('btn.stop')}}</button>
						</div>
						<div class="canshu-row" style="display: none;">
							<div v-for="item in arr2_2" class="canshu-item">
								<div style="font-size: 5vw;text-align: center;padding: 3vh;">
									{{item.field}}
								</div>
								<div style="display: flex;justify-content: center;align-items: center;">
									<div style="width:1.2vh;height:1.2vh;border-radius: 50%;display: inline-block;" :style="{backgroundColor:item.color}"></div>
									<span style="padding-left: 0.5vw;font-size:1.5vw;">{{item.label}}</span>
								</div>
							</div>
							<div class="canshu-item" @click="condition = !condition" style="font-size:4vh;align-items: center;border: 1px solid transparent;text-align:center;background: linear-gradient(#ab3d95, #4143f4);">
								{{condition?$t('btn.stop'):$t('btn.start')}}
							</div>
						</div>
					</div>
					<div class="module" style="margin-top:2vh;font-size: 2vw;height: auto;padding: 2.5vh 2vw;display: flex;justify-content: space-between;">
						<div><span>{{$t('record.label')}}</span><span style="color: #327de0;">aaaaaaaaaaaaaaaaaaaaa.txt</span></div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" src="../js/vue-i18n.js" ></script>
		<script type="text/javascript" src="../i18n/main.js" ></script>
		<script type="text/javascript" charset="utf-8">
			//mui初始化
			mui.init();
			//选项卡点击事件
			mui('body').on('tap', '.menu-item', function(e) {
				var targetTab = this.getAttribute('href');
				console.log(targetTab);
			});
			 
			$app.plusReady(function () {
			    init(); 
			});
			/**
			 * 浏览器测试用
			 */
			$app.webTest(function(){
			    init(); 
			});
			
			function init(){
				new Vue({
					el: '#app',
					i18n: i18n,
					data: {
						condition:true,
						now: null,
						//校准气种类
						arr1: [
							{icon:'../images/jiaozhuncs/flag.png', label:'CO[%]', field:'co'},
							{icon:'../images/jiaozhuncs/flag.png', label:'CO2[%]', field:'co2'},
							{icon:'../images/jiaozhuncs/flag.png', label:'CH4[%]', field:'ch4'}
						],
						//校准气数据
						valObj:{co:'0.463', co2:'0.200',ch4:'0.336'},
						//内部参数种类
						arr2_1: [
							{color: '#5fb725', label: 'factor.h2', field:'45'},
							{color: '#dc4d29', label: 'factor.temp', field:'60'},
							{color: '#33c7fe', label: 'factor.alloyFactor', field:'87'},
							{color: '#8b2dec', label: 'factor.ch4Factor', field:'120'}
						],

						//计算结果
						arr_result: [
							{color: '#de2fb3', label: 'value.cpAms', field:'24'},
							{color: '#b7b124', label: 'value.cpSteel', field:'67'},
							{color: '#b7b124', label: 'value.cpSteel', field:'67'},
							{color: '#ed3c3c', label: 'value.dpt', field:'190'}
						],
						//结果种类
						arr2_2: [
							{color: '#de2fb3', label: 'value.cpAms', field:'24'},
							{color: '#b7b124', label: 'value.cpSteel', field:'67'},
							//{color: '#a732d9', label: 'value.cpCH4', field:'99'},
							//{color: '#615ce9', label: 'value.o2Emk', field:'12'},
							{color: '#ed3c3c', label: 'value.dpt', field:'190'}
						],
					},
					mounted : function(){
						//时间显示
						this.now = new Date().format('yyyy-MM-dd hh:mm:ss')
						setInterval(function(){
							this.now = new Date().format('yyyy-MM-dd hh:mm:ss')
						}.bind(this),1000);
						
					},
					methods : {
						editFactor: function(item){
							mui.prompt(i18n.t(item.label), item.field, '修改参数',['确定','取消'],function(result){
								if(result.index===0){
									if(result.value===''){
										return;
									}
									if(isRealNum(result.value)){
										item.field = result.value;
									}else{
										mui.alert('无效数字!');
									}
								}
							})
						}
					}
				});
			}
			function isRealNum(val){
			    // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
			    if(val === "" || val ==null){
			        return false;
			    }
			    if(!isNaN(val)){
			        return true;
			    }else{
			        return false;
			    }
			}
		</script>
	</body>

</html>